<template>
	<view class="battery-container" :class="{ low_power: batteryLevel <= 10 && batteryLevel > 0 }">
		<view class="battery-body">
			<view v-if="!isCharging" class="battery-level">
				<view :class="[batteryType]" :style="{ width: batteryLevel + '%' }"></view>
			</view>
			<view v-else class="battery-level">
				<view class="charging"></view>
			</view>
			<view class="battery-value">
				<image v-if="isCharging" src="/static/img/examine-warning.png" class="charging-status__img" mode="heightFix" />
			</view>
		</view>
		<view class="battery-head"></view>
		<view v-if="!isCharging || levelInRange" class="battery-number">{{ range }}%</view>
	</view>
</template>
<script>
import { mapGetters } from "vuex";

export default {
	data() {
		return {
			isCharging: false,
			batteryLevel: 0,
		};
	},

	computed: {
		...mapGetters("ringDataManage", ["battery", "notifyBattery"]),

		batteryType() {
			const value = this.batteryLevel;
			if (value < 0) {
				return "turning";
			}
			if (value <= 10) {
				return "danger";
			} else if (value <= 40) {
				return "warning";
			}
			return "normal";
		},

		levelInRange() {
			return this.batteryLevel >= 0 && this.batteryLevel <= 100;
		},

		range() {
			return Math.min(this.batteryLevel, 100);
		},
	},

	watch: {
		battery: {
			handler({ batteryLevel, batteryCharging }) {
				this.isCharging = batteryCharging;
				this.batteryLevel = batteryLevel;
			},
			deep: true,
		},

		notifyBattery({ batteryLevel }) {
			this.batteryLevel = batteryLevel;
		},
	},
};
</script>
<style scoped lang="scss">
$bgc: #55ea7c;
$black: transparent;
$h: 24rpx;
$w: 50rpx;

.battery-container {
	display: flex;
	align-items: center;

	.battery-body {
		width: $w;
		height: $h;
		//border: 2px solid #4fff56;
		background-color: $black;
		border-radius: 8rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		border: 4rpx solid black;

		&::after {
			content: "";
			display: block;
			position: absolute;
			left: 100%;
			top: 50%;
			transform: translateY(-50%);
			height: 10rpx;
			width: 2px;
			border-radius: 0 4rpx 4rpx 0;
			background-color: #d0e6f7;
		}

		.battery-level {
			height: 100%;
			width: 100%;
			
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			inset: 0px;

			border-radius: 2rpx;
			border: 2rpx solid white;
			overflow: hidden;

			.danger {
				background-color: #c22424;
				max-width: 100%;
				height: 100%;
			}

			.warning {
				background-color: #ff0;
				max-width: 100%;
				height: 100%;
			}

			.normal {
				background-color: rgba(85, 234, 124, 1);
				max-width: 100%;
				height: 100%;
			}

			.charging {
				transition: width 0.3s ease-in-out;
				background-color: rgba(85, 234, 124, 0.8);
				width: 100%;
				animation: expand 2s infinite;
				height: 100%;
			}

			@keyframes expand {
				from {
					width: 1%;
				}
				to {
					width: 100%; /* 最终宽度为100px */
				}
			}
		}

		.battery-value {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			inset: 0;
			width: 100%;
			height: 100%;
			font-size: 11px;
			//position: absolute;
			text-align: center;
			color: #fff;
			//mix-blend-mode: difference;
			//margin: 2px;
			box-sizing: border-box;
			line-height: $h;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
			border-radius: 1px;

			.charging-status__img {
				height: calc(#{$h} - 12rpx);
			}
		}
	}

	.battery-head {
		width: 2px;
		height: 5px;
		background-color: black;
		border-radius: 0 2px 2px 0;
	}

	.battery-number {
		font-size: 24rpx;
		font-weight: 500;
		text-align: left;
		margin-left: 5rpx;
	}

	&.low_power {
		.battery-level {
			background-color: #c22424;
		}
	}
}
</style>
